<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>预约查看 - Nkuvr 后台管理系统</title>
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <link href="../../css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../../css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside th:replace="fragment/_fragment::navbar"></aside>


        <!--头部信息-->
        <header th:replace="fragment/_fragment::sidebar"></header>

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">


                    <table style="align-items: center">
                        <div>
                            <br>
                            <table id="SYSYYtable" border="1" style="width: 60%;margin: auto">
                                <thead>
                                <tr>
                                    <td width="18%" height="26">活动名称</td>
                                    <td width="22%" height="26"><span th:text="${appointment.activityName}"></span></td>
                                    <td width="13%" height="26">负责人</td>
                                    <td width="19%" height="26"><span th:text="${appointment.principal}"></span></td>
                                    <td width="12%" height="26">联系方式</td>
                                    <td width="16%" height="26"><span th:text="${appointment.contact}"></span></td>
                                </tr>

                                <tr>
                                    <td width="12%" height="26">预计人数</td>
                                    <td width="16%" height="26"><span th:text="${appointment.appointmentNumber}"></span>
                                    </td>
                                </tr>

                                <tr>
                                    <td width="18%" height="26">活动时间</td>
                                    <td width="22%" height="26"><span
                                            th:text="${#dates.format(appointment.activityTime, 'yyyy-MM-dd')}"></span>
                                    </td>
                                    <td width="13%" height="26">布场时间</td>
                                    <td colspan="3" height="26"><span
                                            th:text="${#dates.format(appointment.setTime, 'yyyy-MM-dd')}"></span></td>
                                </tr>

                                <tr>
                                    <td width="18%" height="26">拟用区域</td>
                                    <td colspan="5" height="40"><span
                                            th:text="${appointment.getLab().getName()}"></span></td>
                                </tr>

                                <tr>
                                    <td width="18%" height="26">主讲人或活动邀请领导嘉宾</td>
                                    <td colspan="5" height="40"><span th:text="${appointment.speaker}"></span></td>
                                </tr>

                                <tr>
                                    <td width="18%" height="70">活动描述</td>
                                    <td colspan="5" height="40"><span th:text="${appointment.description}"></span></td>
                                </tr>

                                <tr>
                                    <td rowspan="5" height="26">服务需求</td>
                                </tr>

                                <tr>
                                </tr>

                                <tr>
                                    <td colspan="5" height="40">设备需求：<span
                                            th:text="${appointment.deviceDemand}"></span></td>
                                </tr>

                                <tr>
                                    <td colspan="5" height="40">消费需求：<span
                                            th:text="${appointment.consumerDemand}"></span></td>
                                </tr>

                                <tr>
                                    <td colspan="5" height="40">其他需求：<span th:text="${appointment.otherDemand}"></span>
                                    </td>
                                </tr>

                                <tr>
                                    <td width="18%" height="46">工作人员</td>
                                    <td width="22%" height="46"><span th:text="${appointment.staff}"></span></td>
                                    <td width="13%" height="46">联系方式</td>
                                    <td width="19%" height="46"><span th:text="${appointment.staffContact}"></span></td>
                                    <td width="12%" height="46">指导老师</td>
                                    <td width="16%" height="46"><span th:text="${appointment.teacher}"></span></td>
                                </thead>

                            </table>
                        </div>
                    </table>
                    <br><br>
                    <div class="form-group col-md-12" style="text-align:center">
                        <a class="btn btn-primary ajax-post" target-form="add-form"
                           th:href="'javascript:appointmentPass('+ ${appointment.id} +')'">通过</a>
                        <a class="btn btn-danger ajax-post" target-form="add-form"
                           th:href="'javascript:appointmentNoPass('+ ${appointment.id} +')'">不通过，填写理由</a>
                    </div>
                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="../../js/main.min.js"></script>
<!--日期选择插件-->
<script src="../../layer/layer.js"></script>
<script>
    function appointmentPass(id) {
        var loadingIndex = null;
        layer.confirm("确认通过该预约吗？", {btn: ['确认', '取消']}, function () {
            $.ajax({
                type: "post",
                url: "/appointment/pass/" + id,
                data: {
                    "id": id
                },
                beforeSend: function () {
                    loadingIndex = layer.msg("处理中", {icon: 16});
                },
                success: function (result) {
                    layer.close(loadingIndex);
                    if (result.success) {
                        layer.msg("处理成功", {time: 1000, icon: 6});
                        window.location.href = "/appointment/list";
                    } else {
                        layer.msg("处理失败，请重新操作", {time: 1000, icon: 5, shift: 6});
                    }
                }
            });
        });
        return false;
    }
</script>
<script>
    function appointmentNoPass(id) {
        var loadingIndex = null;
        layer.prompt({
            formType: 2,
            value: '初始值',
            title: '请填写理由',
            area: ['800px', '350px']
        }, function (reason, index) {
            $.ajax({
                type: "post",
                url: "/appointment/nopass/" + id,
                contentType: "application/json;charset=UTF-8",
                data: {
                    "id": id,
                    "reason": reason
                },
                beforeSend: function () {
                    loadingIndex = layer.msg("处理中", {icon: 16});
                },
                success: function (result) {
                    layer.close(loadingIndex);
                    if (result.success) {
                        layer.msg("处理成功", {time: 1000, icon: 6});
                        window.location.href = "/appointment/list";
                    } else {
                        layer.msg("处理失败，请重新操作", {time: 1000, icon: 5, shift: 6});
                    }
                }
            });
            layer.close(index);
        });
        return false;
    }
</script>
</body>
</html>